<template>
  <div class="app-page-split">
    <t-card title="个人信息" header-bordered class="gl-h100" style="width: 400px; overflow: hidden; padding: 0">
      <div class="lg-list" lg-align="edge">
        <div class="lg-list-item" style="justify-content: center">
          <lg-upload
            v-model="user.avatar"
            type="img"
            value-type="url"
            @success="() => updateInfo({ avatar: user.avatar })"
          />
        </div>
        <div class="lg-list-item">
          <div class="lg-list-label">账号</div>
          <div class="lg-list-value">
            {{ user.username }}
          </div>
        </div>
        <div class="lg-list-item">
          <div class="lg-list-label">昵称</div>
          <div class="lg-list-value">
            <lg-input v-model="user.nickname" @change="(e) => updateInfo({ nickname: e })" />
          </div>
        </div>
        <!--          <div class="lg-list-item">
        <div class="lg-list-label">
          创建日期
        </div>
        <div class="lg-list-value">{{ user.createTime }}</div>
      </div>-->
        <!--          <div class="lg-list-item">
        <div class="lg-list-label">
          最后登录时间
        </div>
        <div class="lg-list-value">admin</div>
      </div>-->
        <!--          <div class="lg-list-item">
        <div class="lg-list-label">
          最后登录IP
        </div>
        <div class="lg-list-value">admin</div>
      </div>-->
        <div class="lg-list-item">
          <div class="lg-list-label">手机</div>
          <div class="lg-list-value">
            <t-space v-if="accounts[1]" class="inner-account">
              <span>{{ accounts[1].account }}</span>
              <t-link theme="primary" @click="bindPhoneModalRef.open()">修改</t-link>
              <t-link theme="danger" @click="unbindAccount(1)">解绑</t-link>
            </t-space>
            <t-link v-else theme="primary" @click="bindPhoneModalRef.open()">绑定</t-link>
          </div>
        </div>
        <div class="lg-list-item">
          <div class="lg-list-label">邮箱</div>
          <div class="lg-list-value">
            <t-space v-if="accounts[2]">
              <span>{{ accounts[2].account }}</span>
              <t-link theme="primary" @click="bindEmailModalRef.open()">修改</t-link>
              <t-link theme="danger" @click="bindAccount">解绑</t-link>
            </t-space>
            <t-link v-else theme="primary" @click="bindEmailModalRef.open()">绑定</t-link>
          </div>
        </div>
        <div class="lg-list-item">
          <div class="lg-list-label">身份证</div>
          <div class="lg-list-value">
            <t-space v-if="accounts[3]">
              <span>{{ accounts[3].account }}</span>
              <t-link theme="primary" @click="bindAccount">修改</t-link>
              <t-link theme="danger" @click="bindAccount">解绑</t-link>
            </t-space>
            <t-link v-else theme="primary" @click="bindAccount">绑定</t-link>
          </div>
        </div>
        <div class="lg-list-item lg-list-card">
          <div class="lg-list-label">角色</div>
          <div class="lg-list-value">
            <div class="inner-role">
              <t-space break-line>
                <t-tag v-for="x in roles" :key="x.id" theme="primary">{{ x.name }}</t-tag>
              </t-space>
            </div>
          </div>
        </div>
        <div class="lg-list-item lg-list-text">
          <div class="lg-list-label">组织机构</div>
          <div class="lg-list-value">
            <div v-for="x in orgs" :key="x.id" class="inner-org">
              <div class="inner-label">{{ x.name }}</div>
              <div class="inner-value">
                {{ x.postName }}
                <t-tag v-if="x.main" theme="primary" size="small" variant="light-outline">主职</t-tag>
                <t-tag v-else size="small" variant="light-outline">兼职</t-tag>
              </div>
            </div>
          </div>
        </div>
      </div>
    </t-card>
    <t-tabs v-model="tabs" class="gl-tabs-auto-h inner-my-tabs" style="flex: 1; overflow: hidden; padding: 0">
      <t-tab-panel label="消息中心" value="notice">
        <notice />
      </t-tab-panel>
      <t-tab-panel label="分组管理" value="tag">
        <user-tag />
      </t-tab-panel>
      <t-tab-panel label="个人配置" value="config">
        <config />
      </t-tab-panel>
      <t-tab-panel label="操作日志" value="log">
        <op-log />
      </t-tab-panel>
    </t-tabs>
  </div>
  <bind-email-modal ref="bindEmailModalRef" />
  <bind-phone-modal ref="bindPhoneModalRef" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
import * as echarts from 'echarts/core';
import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { useAccountStore } from '@/store';
import * as accountApi from '@/api/account';
import { LgUpload, message, toMap } from '@/soar';
import LgInput from './LgInput.vue';
import Config from './config/Index.vue';
import Notice from './notice/List.vue';
import UserTag from './tag/Index.vue';
import OpLog from '@/pages/my/userInfo/op-log/List.vue';
import BindEmailModal from '@/pages/my/userInfo/BindEmailModal.vue';
import BindPhoneModal from '@/pages/my/userInfo/BindPhoneModal.vue';

echarts.use([GridComponent, TooltipComponent, LineChart, CanvasRenderer, LegendComponent]);

const { user, updateInfo } = useAccountStore();

const bindEmailModalRef = ref();
const bindPhoneModalRef = ref();
const tabs = ref('notice');
const roles = ref([]);
accountApi.roles().then((res) => {
  roles.value = res;
});

const orgs = ref([]);
accountApi.orgs().then((res) => {
  orgs.value = res;
});

const ACCOUNTS = {
  // 1: {},
  // 2: {},
  // 3: {},
};
const accounts = ref(ACCOUNTS);
function getAccounts() {
  accountApi.accounts().then((res) => {
    accounts.value = { ...ACCOUNTS, ...toMap(res, 'accountType') };
  });
}
getAccounts();

function bindAccount() {
  message.info('需开发者根据需要自行实现');
}

function unbindAccount(type: number) {
  message.confirm('确定要解绑账号吗？').then(() => {
    accountApi.unbindAccount({ accountType: type, account: accounts.value[type].account }).then(() => {
      getAccounts();
    });
  });
}
</script>

<style lang="less" scoped>
.inner-role {
  margin-left: var(--app-space-horizontal);
  margin-top: 6px;
}

.inner-org {
  margin-left: var(--app-space-horizontal);
  padding: var(--app-space-vertical) 0;
  display: flex;
  .inner-label {
    flex: 1;
    text-align: left;
  }
  .inner-value {
  }
}
.inner-right {
  .t-tabs {
    height: 100%;
  }
}
:deep(.t-card__body) {
  height: calc(100% - 45px);
  overflow-y: auto;
}
.inner-my-tabs {
  :deep(.t-tabs__nav-item) {
    height: 45.25px;
  }
}
:deep(.t-tab-panel) {
  padding-top: var(--app-space-vertical);
}
.inner-account {
  > :not(:first-child) {
    display: none;
  }
  &:hover {
    > :not(:first-child) {
      display: unset;
    }
  }
}
</style>
